<template>
	<div class="confirm" v-if="show">
		<div class="bg" @click='show = false'></div>
		<div class="content">
			<div class="title">{{ title }}</div>
			<div class="input" v-show="inputShow">
				<input :type='inputType' v-model='val'>
			</div>
			<div class="btn">
				<div class="cancel" @click='show = false'>取消</div>
				<div class="yes" @click='yes'>确定</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data(){
		return {
			val : '',
			show: false
		}
	},
	props:{
		title:{
			type: String,
			default: ''
		},
		inputType:{
			type: String,
			default: 'password'
		},
		value:{
			type: Boolean,
			default: false
		},
		content:{
			type: String,
			default: ''
		},
		inputShow:{
			type: Boolean,
			default: false
		}
	},
	watch:{
		value(val){
			this.show = val
		},
		show(val){
			this.$emit('input', val)
		}
	},
	methods:{
		yes(){
			this.show = false;
			this.$emit('yes', this.val)
		}
	},
	created(){

	}
}
</script>


<style lang="scss" scoped>
.confirm{
	.bg{position: fixed;left:0;top:0;width:100%;height:100%;background-color: rgba(0,0,0,.5);z-index: 300;}
	.content{position: fixed;left:5%;top:50%;transform: translateY(-50%);background-color: white;z-index: 301;width:90%;
		box-sizing:border-box;padding:20px;border-radius:4px;
		.title{font-size:18px;padding-bottom: 40px;}
		.input{height: 40px;
			input{border:none;border-bottom:1px solid #78c472;box-sizing:border-box;width:100%;height:40px;font-size:18px;padding:11px 15px;}
		}
		.btn{text-align: right;margin-top:40px;
			*{display: inline-block;font-size:16px;padding:8px 14px;border-radius: 2px;}
			*:active{background-color: #f5f5f5;}
			.cancel{color:#999;}
			.yes{color:#78c472;}
		}
	}

}
</style>
